<template>
  <div class="photos" :style="{height: height}">
    <Navbar title="图文列表"></Navbar>

    <!-- 头部分类 -->
    <div class="category-list">
      <ul>
        <li v-for="(item,index) in cates" :key="item.id" @click="handlerMenuSelected(index)">
          <a href="#" :class="{active:index==currentCate}">{{ item.name }}</a>
        </li>
      </ul>
    </div>

    <!-- 数据列表 -->
    <div class="data-list">
      <ul>
        <li v-for="item in data" :key="item.id">
          <!-- 跳转 -->
          <router-link :to="{name:'photo-detail',query:{id:item.id}}">
            <!-- 普通渲染 -->
            <!-- <img :src="item.img_url" alt /> -->

            <!-- 使用mint ui 的 v-lazy 懒加载 -->
            <img v-lazy="item.img_url" alt />
          </router-link>
          <p>
            <!-- 标题 -->
            <span>{{ item.title }}</span>
            <br />
            <!-- 摘要 -->
            <span>{{ item.summary }}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Photos",
  data() {
    return {
      // 分类数据
      cates: [],
      data: [],
      // 当前选择的分类
      currentCate: 0,
      height: document.documentElement.clientHeight - 100 + "px"
    };
  },
  methods: {
    //   获取菜单栏数据
    getCategorys() {
      this.$http
        .get("/photos/categorys")
        .then(res => {
          this.cates = res.data.categorys;
          this.cates.unshift({ id: 0, name: "全部" });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取图文数据
    getImgWordData(cid) {
      //cid 分类id
      this.$http
        .get("/photos/" + cid)
        .then(res => {
          this.data = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 处理分类选择
    handlerMenuSelected(index) {
      this.currentCate = index;
      // 点击选项后获取对应的数据 路由改变后 触发下的beforeRouteUpdate路由守卫
      this.$router.push({ name: "photos", params: { categoryId: index } });
    }
  },
  created() {
    this.getCategorys();
    this.getImgWordData(0);
  },
  // 路由进来之前
  // beforeRouteEnter(to, from, next){
  //   // 无法使用this
  //   next(vm => {
  //     vm.getImgWordData(to.params.categoryId)
  //   })
  // },

  // 当前路由改变前
  beforeRouteUpdate(to, from, next) {
    this.getImgWordData(to.params.categoryId);
    next();
  }
};
</script>

<style lang="less" scoped>
.photos {
  // margin-bottom: 40px;
  margin-top: 40px;
  overflow: hidden;
  overflow-y: auto;
}
.category-list {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.category-list ul {
  display: inline-block;
  width: 100%;
  // height: 50px;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;
}
.category-list ul li {
  display: inline-block;
  width: 25%;
  height: 100%;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}
.category-list ul li a {
  text-decoration: none;
  font-size: 16px;
  color: black;
}
.category-list ul li a.active {
  color: #fc0280;
}
.data-list ul li {
  width: 100%;
  position: relative;
}
.data-list ul li a {
  display: block;
  width: 100%;
}
.data-list ul li a img {
  width: 100%;
}
.data-list ul li p {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px 0;
}
.data-list ul li p span {
  color: #e6e6e6;
  font-size: 16px;
}
.image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
.with-out-img {
  width: 50px;
  height: 50px;
}
</style>